<template>
  <view class="check-list">
    <u-empty v-if="!dataList?.value?.length" marginTop="200"> </u-empty>
    <u-list v-if="dataList?.value?.length" @scrolltolower="loadMore">
      <view class="continer">
        <u-list-item class="item" v-for="item in dataList.value" :key="item.id">
          <view class="item">
            <view v-if="!item.isRead" class="dot"></view>
            <view
              v-for="element in CHECK_LIST_FIELDS[checkType!]"
              :key="element"
              class="item-line flex-row align-center justify-between"
            >
              <text class="item-line-label">{{
                findCheckFields(element, checkType)?.title
              }}</text>
              <text class="item-line-value ml-20">{{
                item[findCheckFields(element, checkType)?.value!]
              }}</text>
            </view>
            <view class="item-line flex-row justify-end">
              <view>
                <u-button
                  @click="gotoDetail(item)"
                  type="primary"
                  :plain="true"
                  shape="circle"
                  size="mini"
                  >详情</u-button
                >
              </view>
            </view>
          </view>
        </u-list-item>
      </view>
    </u-list>
  </view>
</template>

<script lang="ts" setup>
import { useRequest } from "@/hooks/useRequest";
import { onLoad, onShow } from "@dcloudio/uni-app";
import type { Ref } from "vue";
import { ref } from "vue";
import { findCheckFields } from "@/utils/check";
import { CHECK_TYPE_ENUM } from "@/enum/check";
import { CHECK_REQUEST, CHECK_LIST_FIELDS } from "@/constants/check";

const checkType = ref<CHECK_TYPE_ENUM | null | undefined>(null);
const timeData = ref<string | null>(null);
const loadMore = ref<Function>();

onLoad((params) => {
  const { type, time } = params as { type: CHECK_TYPE_ENUM; time: string };
  checkType.value = type;
  timeData.value = time;
});

const getData = () => {
  if (checkType.value) {
    const { data, run } = useRequest(
      [CHECK_REQUEST[checkType.value], { createDate: timeData.value }],
      { isPage: true, showLoading: true }
    );
    dataList.value = data;
    loadMore.value = run;
  }
};

const dataList = ref<Ref<any[] | null>>();
onShow(() => getData());

const gotoDetail = (item: any) => {
  // @ts-ignore
  const params = uni.$u.queryParams({
    type: checkType.value,
    id: item.id,
    storeName: item.storeName || item.poiName,
    verifyStoreName: item.verifyStoreName,
    poiId: item.poiId,
    createDate: item.createDate || timeData.value,
  });
  uni.navigateTo({
    url: `/pages/check/check-detail${params}`,
  });
};
</script>

<style lang="scss" scoped>
.dot {
  height: 10px;
  width: 10px;
  background-color: $uni-color-error;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

.item {
  position: relative;
  background-color: #fff;
  border-radius: 8px;
  padding: 5px 15px;
  margin-bottom: 15px;
}

.item-line {
  padding: 5px 0;
}

.item-line-value {
  color: $uni-color-subtitle;
  font-size: 14px;
}
</style>
